<template>
	<view class="centerContainer">
		<!-- header -->
		<view class="header">
			<view class="headerUp">
				<image class="upImg" src="../../static/images/shezhi.png" mode=""></image>
				<image class="upImg" src="../../static/images/message.png" mode=""></image>
			</view>
			<view class="headerCenter" v-if="userInfo.nickName">
				<image class="avatar" :src="userInfo.avatarUrl"></image>
				<text class="login" @click="toLogin">{{userInfo.nickName}}</text>
			</view>
			<view class="headerCenter" v-else>
				<image class="avatar" :src="avatar"></image>
				<text class="login" @click="toLogin">登录 | 注册</text>
			</view>
			<view class="headerFooter">
				<image class="headerFooterImg" v-for="(headerImg,index) in headerData.items" :key="headerImg.id" :src="headerImg.above_image.img_url"></image>
				<!-- <image class="headerFooterImg"></image>
				<image class="headerFooterImg"></image> -->
			</view>
		</view>
		
		<!-- 交易盒子 -->
		<view class="trade">
			<view class="tradePay" v-for="(trade,index) in tradeData.items" :key="trade.id">
				<image class="tradeImg" :src="trade.above_image.img_url"></image>
				<text class="payMessage">{{trade.sub_title}}</text>
			</view>
		</view>
		
		<!-- 优惠余额盒子 -->
		<view class="money">
			<view class="moneyItem" v-for="(money,index) in moneyData.items" :key="money.id">
				<text class="moneyNum">{{money.above_text}}</text>
				<text class="moneyText">{{money.below_text}}</text>
			</view>
		</view>
		<!-- 服务盒子 -->
		<view class="serve">
			<text class="serveTitle">工具与服务</text>
			<view class="serveItem" v-for="(serve,index) in serveData.items" :key="serve.id">
				<image class="serveImg" :src="serve.above_image.img_url"></image>
				<text class="serveName">{{serve.below_text}}</text>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		data() {
			return {
				userInfo:{},
			}
		},
		mounted() {
			this.getCenterList()
			// setTimeout(()=>{
			// 	// console.log(this.headerData);
			// },2000)
			
			this.userInfo = wx.getStorageSync('userInfo_key')
			console.log(this.userInfo);
		},
		methods: {
			getCenterList(){
				this.$store.dispatch('getCenterList')
			},
			toLogin(){
				wx.navigateTo({
					url:'../login/login'
				})
			}
		},
		computed:{
			// 把数据装进appData里面
			...mapGetters(['centerList','avatar']),
			// 存头部数据
			headerData(){
				return (this.centerList[0] || {}).data
			},
			// 交易盒子数据
			tradeData(){
				return (this.centerList[1] || {}).data
			},
			// 优惠余额盒子数据
			moneyData(){
				return (this.centerList[2] || {}).data
			},
			// 服务盒子数据
			serveData(){
				return (this.centerList[3] || {}).data
			}
		}
	
	}
</script>

<style lang="stylus">
	.centerContainer
		display flex
		flex-direction column
		width 100%
		// height 410rpx
		.header
			display flex
			flex-direction column
			width 100%
			height 410rpx
			background-color #44CE57
			.headerUp
				display flex
				align-items center
				justify-content space-between
				width 690rpx
				height 84rpx
				margin 30rpx
				// background-color pink
				.upImg
					width 56rpx
					height 56rpx
			.headerCenter
				display flex
				align-items center
				width 690rpx
				height 140rpx
				margin 30rpx
				// background-color pink
				.avatar
					width 140rpx
					height 140rpx
					border-radius 50%
				.login 
					padding 30rpx
					font-size 36rpx
					color #FFFFFF
			.headerFooter
				display flex
				align-items center
				background-color #333333
				height 70rpx
				width 690rpx
				margin-left 30rpx
				border-radius 30rpx 30rpx 0 0
				.headerFooterImg
					width 177rpx
					height 33rpx
					margin-left 20rpx
					// background-color #007AFF
		.trade
			display flex
			flex-direction row
			align-items center
			width 708rpx
			height 280rpx
			margin 20rpx
			background-color #FFFFFF 
			border-radius 40rpx
			.tradePay
				display flex
				flex-direction column
				align-items center
				width 150rpx
				height 150rpx
				margin 50rpx 0 0 0
				// background-color pink
				.tradeImg
					width 70rpx
					height 70rpx
					// background-color #007AFF
				.payMessage
					display block
					width 120rpx
					text-align center
					// height 120rpx
					font-size 28rpx
					color #333333
					margin 10rpx
		.money
			display flex
			flex-direction row
			align-items center
			width 708rpx
			height 280rpx
			margin 20rpx
			background-color #FFFFFF 
			border-radius 40rpx
			.moneyItem 
				display flex
				flex-direction column
				align-items center
				width 150rpx
				height 150rpx
				margin 50rpx 0 0 10rpx
				// background-color pink
				.moneyNum
					width 80rpx
					height 80rpx
					text-align center
					line-height 80rpx
					font-size 36rpx
					font-weight 600
					color #FF5757
				.moneyText
					font-size 28rpx
					color #333333
		.serve
			display flex
			flex-direction row
			flex-wrap wrap
			align-items center
			width 708rpx
			height 750rpx
			margin 20rpx
			background-color #FFFFFF 
			border-radius 40rpx
			.serveTitle
				width 648rpx
				height 62rpx
				font-size 36rpx
				margin 20rpx 0 0 40rpx
				// background-color #007AFF
				line-height 62rpx
			.serveItem
				display flex
				flex-direction column
				align-items center
				width 162rpx
				height 162rpx
				margin 50rpx 0 0 10rpx
				// background-color pink
				.serveImg
					width 100rpx
					height 100rpx
					// background-color #007AFF
				.serveName
					font-size 28rpx
					color #333333
					margin 10rpx
					
					
</style>
